<template>
  <div class="content backgroundimg">
    <div class="titleBox">{{ timeNow }} 郑州天气：{{ tem }} {{ wea }}°C</div>
    <div class="mainBox backgroundimg">
      <div class="leftBox">
        <div class="leftOne backgroundimg">
          <PosChart />
        </div>
        <div class="leftTwo backgroundimg">
          <MarketChart />
        </div>
        <div class="leftThree backgroundimg">
          <PurchaseChart />
        </div>
      </div>
      <div class="centerBox">
        <CenterChart :time-now="timeNow" :number="annualRevenue" :center-data="centerData" />
      </div>
      <div class="rightBox">
        <div class="rightOne backgroundimg">
          <TokenTrend />
        </div>
        <div class="rightTwo backgroundimg">
          <ScrollChart ref="msgListRef" :cashier-order-list="cashierOrderList" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { getSid } from "@/utils/auth";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket.js";
import TokenTrend from "@/components/echarts/TokenTrend";
import PurchaseChart from "@/components/echarts/PurchaseChart";
import MarketChart from "@/components/echarts/MarketChart";
import PosChart from "@/components/echarts/PosChart";
import ScrollChart from "@/components/echarts/ScrollChart";
import CenterChart from "@/components/echarts/CenterChart";
import { getStoreInfo } from "@/api/user";
// import { rsaDecrypt } from '@/utils/commonutils3'
export default {
  components: {
    TokenTrend,
    PurchaseChart,
    MarketChart,
    PosChart,
    ScrollChart,
    CenterChart,
  },
  data() {
    return {
      timeNow: "",
      date: "",
      storeInfo: {},
      cashierOrderList: [],
      msgList: [],
      annualRevenue: null,
      centerData: {
        addOrder: "",
        annualOrder: "", // 年度总订单
        annualRevenue: null, // 年度总营业额
        annualToken: "", // 总通证
        todayRevenue: "", // 今日营业额
        pastRevenue: "", // 昨日营业额
        nowToken: "",
        pastToken: "",
      },
      wea: '',
      tem: ''
    };
  },
  watch: {},
  created() {
    this.getStoreInfo();
    this.getWeaAndTem();
  },
  mounted() {
    this.date = setInterval(this.getTime, 1000);
    if (getSid()) {
      connectWebsocket(
        // 地址
        // 'ws://192.168.3.18:9105/websocket/' + getSid(),
        // 'ws://8.141.7.66:9105/websocket/' + getSid(),
        process.env.VUE_APP_WEBSOCKET_URL + getSid(),
        // 'ws://192.168.3.17/ws/erp/websocket/' + getSid(),
        // "ws://www.yukukeji.com/ws/erp/websocket/" + getSid(),
        // 传递给后台的数据
        {},
        // 成功拿到后台返回的数据的回调函数
        (res) => {
          const datas = JSON.parse(res);
          // console.log(res, '拿到结果')
          const resultObj = datas.companyScreenInfo;
          console.log(resultObj, "拿到结果");
          // console.log(datas, '返回结果，拿到之后该干啥干啥吧！')
          // this.msgLists.splice(0, 0, ...resultArr)
          this.msgList = this.cashierOrderList;
          this.centerData.annualOrder =
            this.centerData.annualOrder * 1 + Number(resultObj.addOrder) * 1;
          this.annualRevenue = Number(
            (
              this.centerData.annualRevenue * 1 +
              Number(resultObj.addAnnualRevenue) * 1
            ).toFixed()
          );
          this.centerData.annualRevenue =
            resultObj.addAnnualRevenue * 1 + this.centerData.annualRevenue * 1;
          this.centerData.annualToken =
            this.centerData.annualToken * 1 + Number(resultObj.addToken) * 1;
          this.centerData.todayRevenue =
            this.centerData.todayRevenue * 1 +
            Number(resultObj.addAnnualRevenue) * 1;
          // this.centerData.pastRevenue = Number(resultObj.pastRevenue).toFixed()
          this.msgList.unshift(...resultObj.cashierOrderList);
          // // this.msgList.push(...newArr.slice(0, 19))
          const iLenght =
            this.cashierOrderList.length >= 20
              ? 20
              : this.cashierOrderList.length;
          this.cashierOrderList = [];
          for (let i = 0; i < iLenght; i++) {
            this.cashierOrderList.push(this.msgList[i]);
          }
          console.log(this.cashierOrderList, "this.cashierOrderList");

          this.$refs.msgListRef.reset();
        },
        // websocket连接失败的回调函数
        (res) => {
          // console.log('失败的回调函数')
          console.log(res, "失败");
        }
      );
    } else {
      console.log(getSid());
      this.$store.dispatch("user/logOut");
    }
  },
  beforeDestroy() {
    clearInterval(this.date);
    closeWebsocket();
  },
  methods: {
    async getStoreInfo() {
      const res = await getStoreInfo();
      if (res.code === 200) {
        this.storeInfo = res.data.companyScreenInfo;
        this.cashierOrderList = this.storeInfo.cashierOrderList;
        this.centerData.annualOrder = this.storeInfo.annualOrder;
        this.centerData.annualRevenue = this.storeInfo.annualRevenue;
        this.centerData.annualToken = this.storeInfo.annualToken;
        this.centerData.todayRevenue = this.storeInfo.todayRevenue;
        this.centerData.pastRevenue = this.storeInfo.pastRevenue;
        this.annualRevenue = Number(this.centerData.annualRevenue.toFixed());
        this.centerData.nowToken = this.storeInfo.nowToken;
        this.centerData.pastToken = this.storeInfo.pastToken;
        console.log(this.storeInfo);
      }
    },
    // 封裝格式化日期
    getTime() {
      var date = new Date(); // 获取当前时间
      var y = date.getFullYear();
      var m = date.getMonth() + 1; // 返回的0-11 所有加1
      var d = date.getDate();
      // var x = date.getDay()// 返回的是 0-6
      // 创建一个数组存储星期 返回值当索引进行调用
      // var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      var h = date.getHours();
      h = h < 10 ? "0" + h : h; // 小于10时在前面补0 统一格式
      var mi = date.getMinutes();
      mi = mi < 10 ? "0" + mi : mi;
      var se = date.getSeconds();
      se = se < 10 ? "0" + se : se;
      this.timeNow =
        y + "." + m + "." + d + "   " + "     " + h + ":" + mi + ":" + se;
      if (h == '10' && mi == '00' && se == '00') {
        console.log("时间到了");
        location.reload();
      }
    },
    getWeaAndTem() {
      axios({
        methods: 'get',
        url: 'https://api.seniverse.com/v3/weather/now.json',
        headers: {},
        params: {
          key: 'S0iWKy23OH6dJRMdo',
          location: 'zhengzhou',
          language: 'zh-Hans',
          unit: 'c'
        },
      })
        .then((res) => {
          // const date = res.data.date;
          // const week = res.data.week;
          // this.dateAndWeek = date + week;
          this.wea = res.data.results[0].now.temperature;
          this.tem = res.data.results[0].now.text;
          // this.tem = res.data.tem;
          console.log('天气', res.data, this.wea, this.tem);
        })
        .catch((error) => {
          console.log(error);
        });
    }
  },
};
</script>

<style lang="scss">
.content {
  /* // background-color: RGBA(5, 14, 67, 1); */
  background-image: url(../../assets/img/bgImg.png);
  height: 5.625rem;

  .titleBox {
    height: 0.2604rem;
    margin-bottom: 0.1563rem;
    padding-left: 8.0156rem;
    font-size: 0.0833rem;
    padding-top: 0.1302rem;
    color: #6fbbf6;
  }

  .mainBox {
    display: flex;
    padding: 0 0.1563rem 0;

    .leftBox {
      width: 2.5521rem;

      .leftOne {
        width: 100%;
        height: 1.3594rem;
        margin-bottom: 0.1563rem;
      }

      .leftTwo {
        width: 100%;
        height: 1.5833rem;
        margin-bottom: 0.1563rem;
      }

      .leftThree {
        width: 100%;
        height: 1.6146rem;
      }
    }

    .centerBox {
      flex: 1;
    }

    .rightBox {
      width: 2.5521rem;
      height: 100%;

      .rightOne {
        width: 2.5521rem;
        height: 1.9479rem;
        margin-bottom: 0.1563rem;
      }

      .rightTwo {
        width: 2.5521rem;
        height: 2.8958rem;
      }
    }
  }
}

.backgroundimg {
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  /* // background-attachment: fixed; */
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
}

div {
  box-sizing: border-box;
}
</style>
